<template>
  <div class="app-container">
    <div style="width:75%;margin:0 auto;margin-bottom:10px;">
      <el-input v-model.trim="query.name" clearable placeholder="姓名" style="width: 200px;" @keyup.enter.native="search" />
      <el-input v-model.trim="query.company" placeholder="公司名" clearable style="width: 200px;" @keyup.enter.native="search" />
      <el-date-picker v-model="q_p_formDate1" style="margin-top:10px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="创建时间" end-placeholder="创建时间" @change="q_p_selectTimecreate" />
      <el-button style="margin-left:20px;" class="filter-item" type="primary" icon="el-icon-search" @click="search">
        {{ $t('table.search') }}
      </el-button>
    </div>
    <div>

      <div v-for="(o,index) in tableData" :key="index" style="width:75%;margin:0 auto;" class="text item">

        <el-card class="bbbb box-card " style="margin-bottom:20px;border-radius:10px;  ">

          <div style="font-size:15px; display:flex;justify-content:flex-start;">
            <span>姓名:{{ o.name }}
            </span>

            <span style="margin-left:30px;">
              公司名:{{ o.company }}
            </span>
            <span style="margin-left:30px;">
              联系方式:{{ o.contact }}
            </span>
            <span style="margin-left:30px;">
              IP:{{ o.ip }}
            </span>
            <span style="margin-left:30px;">
              创建时间:{{ o.createTime| parseTime('{y}-{m}-{d} {h}:{i}') }}
            </span>
          </div>
          <p
            class="aaa"
            style="
             letter-spacing:1px;
              line-height:20px;
              font-size:17px;
        width:100%;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            "
          >{{ o.content }}</p>

        </el-card>
      </div>

    </div>
    <div style="width:75%;margin:0 auto;margin-bottom:10px;">
      <pagination v-show="total > 0" :total="total" :page.sync="query.pageIndex" :limit.sync="query.pageSize" @pagination="getInfo" />
      <el-empty v-if="total==0" description="暂无数据" />

    </div>
  </div>
</template>

<script>
// import FilenameOption from '@/components/Excel/FilenameOption'
// import AutoWidthOption from '@/components/Excel/AutoWidthOption'
// import BookTypeOption from '@/components/Excel/BookTypeOption'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getpage } from '@/api/feedback'
import { deepClone, arraryRemove } from '@/utils'
import { parseTime1 } from '@/utils'
const project = {
  id: 0,
  workText: '',
  completeWork: '',
  status: '',
  incompleteReason: ''
}
export default {

  name: 'GreenInformation',
  components: { Pagination },
  // components: { FilenameOption, AutoWidthOption, BookTypeOption },
  data() {
    return {
      total: 0,
      filesrc: '',
      fileurl: process.env.VUE_APP_BASE_API,
      hideUpload: false,
      fileList: {},
      bookType: 'xlsx',
      autoWidth: true,
      filename: '工作计划',
      status: '',
      rules: {
        title: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],

        introduction: [
          { required: true, message: '请输入摘要', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }, ,
        ]

      },
      loginId: '',
      dialogType: 'new',
      project: Object.assign({}, project),
      currentPage: 1,
      pagesize: 10,

      z_formDate: [],
      tableData: [],
      dialogVisible: false,
      query: {
        startTime: '',
        endTime: '',
        pageIndex: 1,
        pageSize: 10
      },

      q_p_formDate1: []
    }
  },
  computed: {
    // tableData11:function(){
    //     return   this.tableData.filter((item)  => { return item.status==1})

    // },
  },
  created() { },
  mounted() {
    //  console.log(this.fileurl)
    // this.loginId = this.$store.state.user.userId
    this.getInfo()
  },
  methods: {
    q_p_selectTimecreate(value1) {
      if (value1) {
        this.query.startTime = value1[0]
        this.query.endTime = value1[1]
      } else {
        this.query.startTime = ''
        this.query.endTime = ''
      }
    },
    downloadFile() {
      downloadFile(this.project.id).then(res => {
        const content = res
        const blob = new Blob([content]) // 构造一个blob对象来处理数据
        const fileName = this.fileList.fileName // 导出文件名
        if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
          const link = document.createElement('a') // 创建a标签
          link.download = fileName // a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        } else { // 其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },

    handleRemove(file, fileList) {
      console.log(111111111)
      delfile(this.project.id).then((res) => {
        console.log(res)
        this.$message.success('删除成功!')
        this.getfiles()
      })
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    async uploadActionUrl1(item) {
      console.log(this.fileurl)
      const fileObj = item.file
      const form = new FormData()
      form.append('file', fileObj)
      await uploadFile(this.project.id, form).then((response) => {
        this.$message.info('文件：' + fileObj.name + '上传成功')
        this.$refs.upload1.clearFiles()
      })
      this.getfiles()
    },
    getfiles() {
      this.fileList = {}
      this.filesrc = ''
      getfile(this.project.id).then((res) => {
        console.log(res.data)

        var obj = res.data.data
        if (res.data.data.fileName) {
          this.fileList = res.data.data
          const obj1 = res.data.data.fileName.split('.')
          const obj2 = obj1[obj1.length - 1]
          if (obj2 == 'jpg' || obj2 == 'png' || obj2 == 'jpeg') {
            this.filesrc = res.data.data.src
          }
        }
      })
    },
    deletefile() {
      this.$confirm('确认删除?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        delfile(this.project.id).then((res) => {
          console.log(res)
          this.$message.success('删除成功!')
          this.getfiles()
        })
      }).catch(err => console.error(err))
    },

    search() {
      // this.currentPage = 1
      this.getInfo()
    },
    descInput_title() {
      var txtVal = this.project.title.length
      this.remnant_title = txtVal
    },

    descInput_content() {
      var txtVal = this.project.content.length
      this.remnant_content = txtVal
    },
    descInput_introduction() {
      var txtVal = this.project.introduction.length
      this.remnant_introduction = txtVal
    },

    handleUpdate(index) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.project = deepClone(this.tableData11[index])
      this.remnant_introduction = 0
      this.remnant_title = 0
      this.remnant_content = 0
      // this.descInput_introduction()
      this.descInput_title()
      this.getfiles()
      this.descInput_content()
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate()
      }
      // let
      detail(this.project.id).then((res) => {

      })
    },
    submit(type) {
      this.project.status = type

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (type == 0) {
            add(this.project).then((res) => {
              if (res.isSuccess) {
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                })

                this.getInfo()
                this.dialogVisible = false
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
            })
          } else if (type == 1) {
            this.$confirm('确认提交？提交后不能修改', '警告', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              add(this.project).then((res) => {
                if (res.isSuccess) {
                  this.$message({
                    type: 'success',
                    message: '提交成功!'
                  })

                  this.getInfo()
                  this.dialogVisible = false
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.message
                  })
                }
              })
            }).catch(err => console.error(err))
          }
        }
      })
    },
    handleAdd() {
      this.dialogType = 'new'
      this.dialogVisible = true
      this.project = Object.assign({}, project)
      this.fileList = []
      this.remnant_introduction = 0
      this.remnant_content = 0
      this.remnant_title = 0
      this.filesrc = ''
    },

    handleSizeChange: function(size) {
      this.pagesize = size
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage)
    },
    getInfo() {
      getpage(this.query).then((res) => {
        this.tableData = res.data.items
        this.total = res.data.totalItems
      })
    }
  }
}
</script>
<style scoped>
.app-container {
    /*min-height: 100vh;*/
    /*width: 100%;*/
    /*overflow: hidden;*/
    /*background-size: 100% 100%;*/
    /*width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;*/
    /*background: url('../../../images/1.png') no-repeat center top;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}

/*.aaa:hover {
    text-decoration: underline;
}*/
</style>

